<template>
  <view class="detail-container" :style="{height: `${windowHeight}px`}">
    <view class="header">
      <view class="nav-back" @click="goBack">
        <view class="iconfont icon-left"></view>
      </view>
      <view class="title">订单详情</view>
    </view>
    
    <view class="order-card" v-if="orderInfo.id">
      <view class="status-section" :class="{ 'status-paid': orderInfo.paymentCompletionTime }">
        <view class="status-icon">
          <view class="iconfont" :class="orderInfo.paymentCompletionTime ? 'icon-check-circle text-green' : 'icon-time text-orange'"></view>
        </view>
        <view class="status-text">{{ orderInfo.paymentCompletionTime ? '支付成功' : '等待支付' }}</view>
      </view>
      
      <view class="info-section">
        <view class="info-item">
          <text class="label">订单号</text>
          <text class="value">{{ orderInfo.orderNo || '无' }}</text>
        </view>
        <view class="info-item">
          <text class="label">套餐</text>
          <text class="value">{{ orderInfo.couponsName || '未知套餐' }}</text>
        </view>
        <view class="info-item">
          <text class="label">订单金额</text>
          <text class="value price">¥{{ orderInfo.orderAmount || '0.00' }}</text>
        </view>
        <view class="info-item">
          <text class="label">支付方式</text>
          <text class="value">{{ getPaymentType(orderInfo.paymentType) }}</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{ orderInfo.createTime || '未知' }}</text>
        </view>
        <view class="info-item" v-if="orderInfo.paymentCompletionTime">
          <text class="label">支付时间</text>
          <text class="value">{{ orderInfo.paymentCompletionTime }}</text>
        </view>
        <view class="info-item" v-if="orderInfo.thirdOrderNo">
          <text class="label">支付单号</text>
          <text class="value">{{ orderInfo.thirdOrderNo }}</text>
        </view>
        <view class="info-item" v-if="orderInfo.transactionType">
          <text class="label">交易类型</text>
          <text class="value">{{ orderInfo.transactionType }}</text>
        </view>
        <view class="info-item" v-if="orderInfo.paymentBank">
          <text class="label">付款银行</text>
          <text class="value">{{ orderInfo.paymentBank }}</text>
        </view>
        <view class="info-item">
          <text class="label">退款状态</text>
          <text class="value" :class="{'text-red': orderInfo.isRefund === '1'}">
            {{ orderInfo.isRefund === '1' ? '已退款' : '未退款' }}
          </text>
        </view>
        <view class="info-item" v-if="orderInfo.isRefund === '1' && orderInfo.refundId">
          <text class="label">退款单号</text>
          <text class="value">{{ orderInfo.refundId }}</text>
        </view>
      </view>
      
      <view class="action-section" v-if="!orderInfo.paymentCompletionTime">
        <button class="cu-btn block bg-blue lg" @click="handlePayAgain">重新支付</button>
      </view>
    </view>
    
    <view class="empty-container" v-else>
      <view class="iconfont icon-empty text-gray empty-icon"></view>
      <view class="empty-text">订单信息不存在</view>
    </view>
  </view>
</template>

<script>
  import { getOrder } from '@/api/products/order'
  
  export default {
    data() {
      return {
        orderId: null,
        orderInfo: {}
      }
    },
    computed: {
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight
      }
    },
    onLoad(options) {
      if (options.id) {
        this.orderId = options.id
        this.getOrderDetail()
      } else {
        this.$modal.showToast('订单ID不存在')
      }
    },
    methods: {
      // 获取订单详情
      getOrderDetail() {
        getOrder(this.orderId).then(res => {
          if (res.code === 200) {
            this.orderInfo = res.data || {}
          } else {
            this.$modal.showToast(res.msg || '获取订单详情失败')
          }
        }).catch(err => {
          console.error('获取订单详情失败', err)
          this.$modal.showToast('获取订单详情失败')
        })
      },
      
      // 获取支付方式文字
      getPaymentType(type) {
        const types = {
          '0': '微信支付',
          '1': '支付宝支付'
        }
        return types[type] || '未知支付方式'
      },
      
      // 重新支付
      handlePayAgain() {
        // 这里需要根据实际支付流程进行处理
        this.$modal.showToast('重新支付功能开发中')
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f6f7;
  }
  
  .detail-container {
    width: 100%;
    
    .header {
      padding: 20px 15px;
      background-color: #3c96f3;
      display: flex;
      align-items: center;
      
      .nav-back {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          color: #fff;
          font-size: 24px;
        }
      }
      
      .title {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        margin-left: 10px;
      }
    }
    
    .order-card {
      margin: 15px;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      
      .status-section {
        background-color: #ff9800;
        padding: 20px;
        color: #fff;
        display: flex;
        align-items: center;
        
        &.status-paid {
          background-color: #4caf50;
        }
        
        .status-icon {
          margin-right: 10px;
          
          .iconfont {
            font-size: 24px;
          }
        }
        
        .status-text {
          font-size: 18px;
          font-weight: bold;
        }
      }
      
      .info-section {
        padding: 15px;
        
        .info-item {
          display: flex;
          justify-content: space-between;
          padding: 12px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .label {
            color: #666;
            font-size: 14px;
          }
          
          .value {
            color: #333;
            font-size: 14px;
            font-weight: 500;
            max-width: 70%;
            text-align: right;
            
            &.price {
              color: #ff5722;
            }
            
            &.text-red {
              color: #ff5252;
            }
          }
        }
      }
      
      .action-section {
        padding: 15px;
        
        .cu-btn {
          margin: 0;
        }
      }
    }
    
    .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 100px;
      
      .empty-icon {
        font-size: 80px;
        color: #d0d0d0;
      }
      
      .empty-text {
        margin-top: 15px;
        color: #999;
        font-size: 14px;
      }
    }
  }
</style> 